<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <title></title>
        <style>
        </style>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    </head>
    <body>
       <div id="app">
           <my-div messege="今天天气很好" imgsrc="img/1.png"></my-div>
            <my-div messege="明天天气很好" imgsrc="img/1.png"></my-div>
       </div>
       <template id="my_div">
           <div><!--最外层只能渲染一个元素，如果是多个则最外层用一个容器包括着-->
               <p>{{messege}}</p>
               <img :src="imgsrc" alt="" width="200" height="200">
           </div>
       </template>
    </body>
</html>
<script>
Vue.component("my-div",{
    template:"#my_div",
    props:['messege','imgsrc']
});
    //1.创建vue实例
    let vm=new Vue({
        el:'#app',
        // data:{
        //     message:'你好，世界！'
        // }
    })
</script>